<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>CPA数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>结算管理</el-breadcrumb-item>
      <el-breadcrumb-item>预收管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 财务信息 -->
    <Container
      class="u-mb15 u-pb0"
      v-show="financeData.length"
    >
      <el-row :gutter="20">
        <FinanceTotal
          :data="item"
          v-for="(item, index) in financeData"
          :key="index"
        ></FinanceTotal>
      </el-row>
    </Container>

    <Container class="u-mb15">
      <!-- filter -->
      <el-form
        class="m-form--filter"
        inline
      >
        <el-form-item>
          <el-select
            class="u-w160"
            v-model="customer_items.model_value"
            size="mini"
            :placeholder="customer_items.placeHolder"
            filterable
          >
            <el-option
              v-for="item in customer_items.options"
              :key="item.customerCode"
              :label="item.name"
              :value="item.customerCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="pageInfo"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </Container>

    <Container>
      <el-form
        inline
        class="m-table--handle"
      >
        <el-form-item>
          <el-button
            size="mini"
            @click.stop="addExamine"
          >添加预收款</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            @click.stop="importData"
          >导出当前明细</el-button>
        </el-form-item>
        <CustomTableColumn :columns.sync="tableColumn" />
      </el-form>

      <el-table
        :data="tableData"
        border
        stripe
      >
        <el-table-column
          v-for="(c, i) in filterTableColumn"
          :key="i"
          :fixed="c.fixed"
          :sortable="c.sortable"
          :prop="c.prop"
          :label="c.label"
        >
        </el-table-column>
        <el-table-column
          label="查看明细"
          width="100"
        >
          <template slot-scope="scope">
            <div @click.stop="seeBill(scope.row.entityCode,scope.row.entityProductCode)"><i class="el-icon-view"></i></div>
          </template>
        </el-table-column>
        <el-table-column
          label="审批进度"
          width="100"
        >
          <template slot-scope="scope">
            <div @click.stop="examineProgress(scope.row.txHistoryIds)">
              <span>{{scope.row.childNum}}</span></div>
          </template>
        </el-table-column>
      </el-table>
    </Container>

    <!-- 导出 -->
    <el-dialog
      width="90%"
      title="导出"
      :visible.sync="billStatus"
    >
      <el-form inline>
        <el-form-item>
          <el-button @click="billImport">导出</el-button>
        </el-form-item>
      </el-form>

      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="(item,i) in tabs"
          :key="i"
          :label=item.label
          :name=item.name
        ></el-tab-pane>
      </el-tabs>
      <el-table
        :data="tableDataBillDetail"
        border
        stripe
      >
        <el-table-column
          v-for="(c, i) in tableColumn_bill_detail"
          :key="i"
          :fixed="c.fixed"
          :sortable="c.sortable"
          :prop="c.prop"
          :label="c.label"
          v-show="c.visible"
        >
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 发起预收款审批 -->
    <el-dialog
      title="发起预收款审批"
      :visible.sync="examineStatus"
    >
      <el-form
        ref="form"
        :model="examine_from"
        label-width="125px"
      >
        <el-form-item label="客户名称：">
          <el-select
            size="small"
            v-model="examine_from.entityCode"
            :placeholder="customer_items.placeHolder"
            @change="proInfo"
            filterable
          >
            <el-option
              v-for="item in customer_items.options"
              :key="item.customerCode"
              :label="item.name"
              :value="item.customerCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称：">
          <el-select
            size="small"
            v-model="examine_from.entityProductCode"
            :placeholder="pro_items.placeHolder"
            filterable
          >
            <el-option
              v-for="item in pro_items.options"
              :key="item.id"
              :label="item.productName"
              :value="item.customerProductCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预收金额：">
          <el-input
            size="small"
            style="width: 194px;"
            v-model="examine_from.price"
          ></el-input>
        </el-form-item>
        <el-form-item label="我方主体：">
          <el-select
            size="small"
            v-model="examine_from.ownerCode"
            placeholder="请选择"
            filterable
          >
            <el-option
              v-for="item in kyhd"
              :key="item.id"
              :label="item.val"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            class="u-w350"
            size="small"
            type="textarea"
            v-model="examine_from.notes"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="onSubmit"
          >确认</el-button>
          <el-button
            size="small"
            @click="exit"
          >取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      width="90%"
      :visible.sync="examineProgressStatus"
    >
      <el-table
        :data="examine_progress"
        border
        stripe
      >
        <el-table-column
          v-for="(c, i) in tableColumn_examine_progress"
          :key="i"
          :fixed="c.fixed"
          :sortable="c.sortable"
          :prop="c.prop"
          :label="c.label"
          :formatter="c.format"
          v-show="c.visible"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Container from "@/components/container";
import CustomTableColumn from "@/components/custom-table-column";
import FinanceTotal from "@/components/finance-total";
export default {
  name: "cpa-final-receivable",
  components: {
    Container,
    CustomTableColumn,
    FinanceTotal
  },
  data() {
    return {
      checked: true,
      billStatus: false,
      examineStatus: false,
      examineProgressStatus: false,
      tableColumn: [
        {
          prop: "entityCodeName",
          label: "客户名称",
          visible: true
        },
        {
          prop: "entityProductCodeName",
          label: "产品名称",
          sortable: true,
          visible: true
        },
        {
          prop: "balance",
          label: "账户余额",
          visible: true
        }
      ],
      tableColumn_bill_detail: [
        {
          prop: "date",
          label: "日期",
          sortable: true,
          visible: true
        },
        {
          prop: "entityCodeName",
          label: "客户名称",
          visible: true
        },
        {
          prop: "entityProductCodeName",
          label: "产品名称",
          visible: true
        },
        {
          prop: "balance",
          label: "预收",
          visible: true
        },
        {
          prop: "source",
          label: "来源",
          visible: true
        },
        {
          prop: "ownerCodeName",
          label: "我方主体",
          visible: true
        }
      ],
      tableColumn_examine_progress: [
        {
          prop: "ctime",
          label: "发起时间",
          sortable: true,
          visible: true
        },
        {
          prop: "createUser",
          label: "发起人",
          visible: true
        },
        {
          prop: "customerName",
          label: "预收客户",
          visible: true
        },
        {
          prop: "productName",
          label: "产品名称",
          visible: true
        },
        {
          prop: "kyhdType",
          label: "对应主体",
          visible: true
        },
        {
          prop: "amount",
          label: "金额",
          visible: true
        },
        {
          prop: "status",
          label: "审批进度",
          visible: true,
          format: row => {
            return this.$store.getters.findDingStatus(row.status)
              ? this.$store.getters.findDingStatus(row.status).val
              : "未开始";
          }
        },
        {
          prop: "diffDay",
          label: "该节点审批等待天数",
          visible: true,
          format: function(row) {
            switch (row.diffDay) {
              case 0:
                return "小于一天";
              case -1:
                return "已完成";
              default:
                return row.diffDay + "天";
            }
          }
        }
      ],
      detailCities: [
        "日期",
        "客户名称",
        "产品名称",
        "预收",
        "来源",
        "我方主体"
      ],
      detailCitiesFilterVal: [
        "date",
        "entityCodeName",
        "entityProductCodeName",
        "balance",
        "source",
        "ownerCodeName"
      ],
      menu_nav: ["CPA数据管理", "客户预收管理"],
      customer_items: {
        model_value: "",
        placeHolder: "客户",
        options: []
      },
      pro_items: {
        placeHolder: "产品",
        options: []
      },
      tableDataBillDetail: [],
      tableData: [],
      examine_progress: [],
      dateValue: "",
      financeDateValue: "",
      financeData: [],
      params: {
        type: "2",
        val: "",
        startDate: "",
        endDate: ""
      },
      tabs: [
        {
          label: "预收",
          name: "1"
        },
        {
          label: "抵扣",
          name: "2"
        }
      ],
      activeName: "1",
      examine_from: {
        ownerCode: "",
        entityCode: "",
        entityProductCode: "",
        notes: "",
        price: "",
        type: "1"
      },
      kyhd: [
        {
          id: "Y1",
          val: "深圳康远互动科技有限公司"
        },
        {
          id: "Y2",
          val: "霍尔果斯康远互动网络科技有限公司"
        },
        {
          id: "Y3",
          val: "上海贝玩网络科技有限公司"
        },
        {
          id: "Y4",
          val: "深圳自由泰格互动科技有限公司"
        }
      ],
      entityCode: "",
      entityProductCode: ""
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter(item => item.visible);
    },
    filterTableLabel() {
      return this.filterTableColumn.map(item => item.label);
    },
    filterTableProp() {
      return this.filterTableColumn.map(item => item.prop);
    }
  },
  filters: {
    toFixed: function(value) {
      if (!value) return "";
      value = Number(value);
      return value.toFixed(2);
    }
  },
  created() {
    this.customerSelect();
    this.financeInfo();
  },
  methods: {
    customerSelect() {
      /*客户*/
      this.$http({
        method: "get",
        url: this.apiUrl.customerSearch,
        params: {
          offset: 1,
          limit: 9999,
          val: ""
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.customer_items.options = data.items;
          }
        })
        .catch(() => {});
    },
    financeInfo() {
      /*财务*/
      this.$http({
        method: "get",
        url: this.apiUrl.financeInfoBill,
        params: {
          type: 1
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.financeData = [];
            for (let item of data.list) {
              if (item.billType == 2) {
                this.financeData.push(item);
              }
            }
          }
        })
        .catch(() => {});
    },
    proInfo() {
      /*产品*/
      this.$http({
        method: "get",
        url: this.apiUrl.customerProListLight,
        params: {
          customerCode: this.examine_from.entityCode
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.pro_items.options = data.items;
            this.examine_from.entityProductCode = "";
          }
        })
        .catch(() => {});
    },
    pageInfo() {
      this.$http({
        method: "get",
        url: this.apiUrl.txList,
        params: {
          type: "1",
          entityCode: this.customer_items.model_value
        }
      })
        .then(res => {
          if (res.status === 200) {
            this.tableData = res.data.items;
          }
        })
        .catch(() => {});
    },
    seeCusBill() {
      this.$http({
        method: "get",
        url: this.apiUrl.txDetail,
        params: {
          entityCode: this.entityCode,
          entityProductCode: this.entityProductCode,
          type: "1",
          action: this.activeName
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.tableDataBillDetail = data.items;
          }
        })
        .catch(() => {});
    },
    seeBill(entityCode, entityProductCode) {
      this.entityCode = entityCode || this.entityCode;
      this.entityProductCode = entityProductCode || this.entityProductCode;
      this.seeCusBill();
      this.billStatus = true;
    },
    exit() {
      this.billStatus = this.examineStatus = this.examineProgressStatus = false;
    },
    seeEvent() {
      this.billStatus = true;
    },
    dateChange() {
      this.params.startDate = this.formatDateTime(this.dateValue[0], "ymd");
      this.params.endDate = this.formatDateTime(this.dateValue[1], "ymd");
    },
    handleClick() {
      if (this.activeName == "1") {
        this.tableColumn_bill_detail[3].label = "预收";
        this.detailCities[3] = "预收";
      } else if (this.activeName == "2") {
        this.tableColumn_bill_detail[3].label = "抵扣";
        this.detailCities[3] = "抵扣";
      }
      this.seeBill();
    },
    addExamine() {
      this.examineStatus = true;
    },
    onSubmit() {
      for (let item in this.examine_from) {
        if (item != "notes" && this.examine_from[item] == "") {
          this.$message({
            type: "info",
            message: "除备注信息，其他不能为空"
          });
          return false;
        }
      }
      this.$http({
        method: "post",
        url: this.apiUrl.txCreate,
        data: this.examine_from
      })
        .then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: "添加成功"
            });
            this.examineStatus = false;
            this.pageInfo();
          } else {
            this.$message({
              type: "error",
              message: "添加失败"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "添加失败"
          });
        });
    },
    importData() {
      if (this.tableData.length == 0) {
        this.$message({
          type: "info",
          message: "请查询数据"
        });
        return false;
      }
      let importData = this.tableData;
      let fileName = [this.customer_items.model_value, "预收明细"].join("_");
      this.handleDownload(
        this.filterTableLabel,
        this.filterTableProp,
        importData,
        fileName
      );
    },
    billImport() {
      if (this.tableDataBillDetail.length == 0) {
        this.$message({
          type: "info",
          message: "暂无数据"
        });
        return false;
      }
      let tHeader = this.detailCities;
      let filterVal = this.detailCitiesFilterVal;
      let importData = this.tableDataBillDetail;
      let action = this.activeName == "1" ? "预收" : "抵扣";
      let fileName = [this.customer_items.model_value, action, "明细"].join(
        "_"
      );
      this.handleDownload(tHeader, filterVal, importData, fileName);
    },
    examineProgress(arr) {
      let arrString = arr.join(",");
      this.examineProgressStatus = true;
      this.$http({
        method: "get",
        url: this.apiUrl.dingGetTxList,
        params: {
          ids: arrString
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.examine_progress = data.list;
          }
        })
        .catch(() => {});
    }
  }
};
</script>
